import React from 'react'
import { render } from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';

// action
const ADD_TODO = 'ADD_TODO';


function addTodo(text){
    return　{
        type : ADD_TODO,
        text
    }
}

// reducer
function todo(state, action){
	console.log(action)
    switch(action.type){
        case ADD_TODO:{
            let s = Object.assign({},state);
            s.data.push(action.text);
            
            let s2 =  {
                data : [...state.data, action.text]
            }
            console.log(s);
            console.log(s2);
            return s2;
            break;
        }
        default:
            return state;
    }
}

// store
const store = createStore(todo,{data:[1,2]});

class App extends React.Component{
    constructor(props){
        super(props);
    }
    render(){  
        return(
            <div>
                {this.props.data.map((e)=>{
                    return e+"-"
                })}
            </div>
        )
    }
}

function mapStateToProps(state){
    return {
        data : state.data
    }
}
function mapDispatchToProps(dispatch){
    return {
		add : (text)=>dispatch(addTodo(text))
    }
}

App = connect(mapStateToProps,mapDispatchToProps)(App);

render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById("root")
)

 store.dispatch(addTodo("test"));
// store.dispatch(addTodo("tes1as2t"));

